<template>
    <div>
        <el-tabs type="border-card">
            <el-tab-pane label="全部">
                <el-card class="box-card" v-for="item in allOrders">
                    <div slot="header">
                        <span>ORS-{{ item.orderId }}</span>
                    </div>
                    <div>
                        <el-form label-position="left" inline>
                            <el-form-item label="小区:">
                                <span>{{ item.communityName }}</span>
                            </el-form-item>
                            <span class="tab"/>
                            <el-form-item label="车位时价:">
                                <span>{{ item.carportPrice }} (元/小时)</span>
                            </el-form-item>
                            <el-form-item label="开始时间:">
                                <span>{{ item.orderBeginTime }}</span>
                            </el-form-item>
                            <el-form-item label="结束时间:">
                                <span>{{ item.orderEndTime }}</span>
                            </el-form-item>
                            <br/>
                            <el-form-item label="预付金额:">
                                <span>{{ item.orderExpectedPrice }} 元</span>
                            </el-form-item>
                            <span v-if="item.payoff.payoffMoney != null">
                                <el-form-item label="优惠金额:">
                                    <span>{{ item.payoff.payoffDiscountAmount }} 元</span>
                                </el-form-item>
                                <el-form-item label="优惠描述:">
                                    <span>{{ item.payoff.payoffDiscountDes }}</span>
                                </el-form-item>
                                <el-form-item label="实付金额:" v-if="item.payoff != null">
                                    <span>{{ item.payoff.payoffMoney }} 元</span>
                                </el-form-item>
                                <el-form-item label="付款时间:" v-if="item.payoff != null">
                                    <span>{{ item.payoff.payoffTime }}</span>
                                </el-form-item>
                            </span>
                            <br/>
                            <el-form-item label="下单时间:">
                                <span>{{ item.createTime }}</span>
                            </el-form-item>
                            <el-form-item  v-if="item.orderStatus === 0" label="取消时间:">
                                <span>{{ item.updateTime }}</span>
                            </el-form-item>
                            <el-form-item label="评价内容: " v-if="item.comment != null">
                                <span>{{ item.comment.commentContent }}</span>
                            </el-form-item>
                            <el-form-item label="状态:">
                                <el-tag v-if="item.orderStatus === 1">进行中</el-tag>
                                <el-tag type="info"  v-if="item.orderStatus === 0">已取消</el-tag>
                                <el-tag type="warning" v-if="item.orderStatus === 2">已结算</el-tag>
                                <el-tag type="danger" v-if="item.orderStatus === 3">争议订单</el-tag>
                            </el-form-item>
                            <el-form-item v-if="item.orderStatus === 1">
                                <el-button type="text" @click="payoff(item.orderId)">去结算</el-button>
                                <el-button type="text" @click="onCancelOrderClick(item.orderId)">取消订单</el-button>
                            </el-form-item>
                            <el-form-item v-if="item.comment == null && item.orderStatus === 2">
                                <el-button type="text" @click="openCommentDialog(item.orderId)">立即评价</el-button>
                            </el-form-item>
                            <el-form-item v-if="item.accuseStatus == null && item.orderStatus === 2">
                                <el-button type="text" @click="insertAccuse(item.orderId)">投诉</el-button>
                            </el-form-item>
                            <el-form-item v-if="item.accuseStatus != null">
                                <el-button type="text" @click="insertAccuse(item.orderId, item.accuseStatus)">查看投诉结果</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="进行中">
                <el-card class="box-card" v-for="item in ongoingOrders">
                    <div slot="header">
                        <span>ORS-{{ item.orderId }}</span>
                    </div>
                    <div>
                        <el-form label-position="left" inline>
                            <el-form-item label="小区:">
                                <span>{{ item.communityName }}</span>
                            </el-form-item>
                            <span class="tab"/>
                            <el-form-item label="车位时价:">
                                <span>{{ item.carportPrice }} (元/小时)</span>
                            </el-form-item>
                            <el-form-item label="开始时间:">
                                <span>{{ item.orderBeginTime }}</span>
                            </el-form-item>
                            <el-form-item label="结束时间:">
                                <span>{{ item.orderEndTime }}</span>
                            </el-form-item>
                            <br/>
                            <el-form-item label="预付金额:">
                                <span>{{ item.orderExpectedPrice }} 元</span>
                            </el-form-item>
                            <br/>
                            <el-form-item label="下单时间:">
                                <span>{{ item.createTime }}</span>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="text" @click="payoff(item.orderId)">去结算</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="text" @click="onCancelOrderClick(item.orderId)">取消订单</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="已完成">
                <el-card class="box-card" v-for="item in completedOrders">
                    <div slot="header">
                        <span>ORS-{{ item.orderId }}</span>
                    </div>
                    <div>
                        <el-form label-position="left" inline>
                            <el-form-item label="小区:">
                                <span>{{ item.communityName }}</span>
                            </el-form-item>
                            <span class="tab"/>
                            <el-form-item label="车位时价:">
                                <span>{{ item.carportPrice }} (元/小时)</span>
                            </el-form-item>
                            <el-form-item label="开始时间:">
                                <span>{{ item.orderBeginTime }}</span>
                            </el-form-item>
                            <el-form-item label="结束时间:">
                                <span>{{ item.orderEndTime }}</span>
                            </el-form-item>
                            <br/>
                            <el-form-item label="预付金额:">
                                <span>{{ item.orderExpectedPrice }} 元</span>
                            </el-form-item>
                            <el-form-item label="优惠金额:">
                                <span>{{ item.payoff.payoffDiscountAmount }} 元</span>
                            </el-form-item>
                            <el-form-item label="优惠描述:">
                                <span>{{ item.payoff.payoffDiscountDes }}</span>
                            </el-form-item>
                            <el-form-item label="实付金额:" v-if="item.payoff != null">
                                <span>{{ item.payoff.payoffMoney }} 元</span>
                            </el-form-item>
                            <br/>
                            <el-form-item label="下单时间:">
                                <span>{{ item.createTime }}</span>
                            </el-form-item>
                            <el-form-item label="付款时间:" v-if="item.payoff != null">
                                <span>{{ item.payoff.payoffTime }}</span>
                            </el-form-item>
                            <el-form-item v-if="item.comment == null">
                                <el-button type="text" @click="openCommentDialog(item.orderId)">立即评价</el-button>
                            </el-form-item>
                            <el-form-item label="评价内容: " v-if="item.comment != null">
                                <span>{{ item.comment.commentContent }}</span>
                            </el-form-item>
                            <el-form-item v-if="item.accuseStatus == null">
                                <el-button type="text" @click="insertAccuse(item.orderId)">投诉</el-button>
                            </el-form-item>
                            <el-form-item v-if="item.accuseStatus != null">
                                <el-button type="text" @click="insertAccuse(item.orderId, item.accuseStatus)">查看投诉结果</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="已取消">
                <el-card class="box-card" v-for="item in canceledOrders">
                    <div slot="header">
                        <span>ORS-{{ item.orderId }}</span>
                    </div>
                    <div>
                        <el-form label-position="left" inline>
                            <el-form-item label="小区:">
                                <span>{{ item.communityName }}</span>
                            </el-form-item>
                            <el-form-item label="车位时价:">
                                <span>{{ item.carportPrice }} (元/小时)</span>
                            </el-form-item>
                            <el-form-item label="开始时间:">
                                <span>{{ item.orderBeginTime }}</span>
                            </el-form-item>
                            <el-form-item label="结束时间:">
                                <span>{{ item.orderEndTime }}</span>
                            </el-form-item>
                            <br/>
                            <el-form-item label="预付金额:">
                                <span>{{ item.orderExpectedPrice }} 元</span>
                            </el-form-item>
                            <el-form-item label="下单时间:">
                                <span>{{ item.createTime }}</span>
                            </el-form-item>
                            <el-form-item label="取消时间:">
                                <span>{{ item.updateTime }}</span>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="出租订单">
                <el-card class="box-card" v-for="item in rentalOrders">
                    <div slot="header">
                        <span>ORS-{{ item.orderId }}</span>
                    </div>
                    <div>
                        <el-form label-position="left" inline>
                            <el-form-item label="小区:">
                                <span>{{ item.communityName }}</span>
                            </el-form-item>
                            <span class="tab"/>
                            <el-form-item label="车位时价:">
                                <span>{{ item.carportPrice }} (元/小时)</span>
                            </el-form-item>
                            <el-form-item label="开始时间:">
                                <span>{{ item.orderBeginTime }}</span>
                            </el-form-item>
                            <el-form-item label="结束时间:">
                                <span>{{ item.orderEndTime }}</span>
                            </el-form-item>
                            <br/>
                            <el-form-item label="预计收入:">
                                <span>{{ item.orderExpectedPrice * 0.7 }} 元</span>
                            </el-form-item>
                            <span v-if="item.orderStatus === 2">
                                <el-form-item label="实际收入:" v-if="item.payoff != null">
                                    <span>{{ item.payoff.payoffMoney * 0.7 }} 元</span>
                                </el-form-item>
                                <el-form-item label="付款时间:" v-if="item.payoff != null">
                                    <span>{{ item.payoff.payoffTime }}</span>
                                </el-form-item>
                            </span>
                            <span v-if="item.payoff != null">
                                <el-form-item label="实际收入:">
                                    <span>{{ item.payoff.payoffMoney * 0.7 }} 元</span>
                                </el-form-item>
                            </span>
                            <span v-if="item.orderStatus === 0">
                                <el-form-item label="提示:">
                                    <span>该订单已取消，收入请查看余额明细</span>
                                </el-form-item>
                            </span>
                            <br/>
                            <el-form-item label="下单时间:">
                                <span>{{ item.createTime }}</span>
                            </el-form-item>
                            <div v-if="item.orderStatus === 0">
                                <el-form-item label="取消时间:">
                                    <span>{{ item.updateTime }}</span>
                                </el-form-item>
                            </div>
                            <el-form-item label="评价内容: " v-if="item.comment != null">
                                <span>{{ item.comment.commentContent }}</span>
                            </el-form-item>
                            <el-form-item label="状态:">
                                <el-tag v-if="item.orderStatus === 1">进行中</el-tag>
                                <el-tag type="info" v-if="item.orderStatus === 0">已取消</el-tag>
                                <el-tag type="warning" v-if="item.orderStatus === 2">已结算</el-tag>
                                <el-tag type="danger" v-if="item.orderStatus === 3">争议订单</el-tag>
                            </el-form-item>
                            <el-form-item v-if="item.comment == null && item.orderStatus === 2">
                                <el-button type="text" @click="openCommentDialog(item.orderId)">立即评价</el-button>
                            </el-form-item>
                            <el-form-item v-if="item.accuseStatus == null && item.orderStatus === 2">
                                <el-button type="text" @click="insertAccuse(item.orderId)">投诉</el-button>
                            </el-form-item>
                            <el-form-item v-if="item.accuseStatus != null">
                                <el-button type="text" @click="insertAccuse(item.orderId, item.accuseStatus)">查看投诉结果</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </el-tab-pane>
        </el-tabs>
        <!-- 评论模态框 -->
        <el-dialog title="评论" :close-on-press-escape="false" :close-on-click-modal="false" :visible.sync="dialogVisible" width="30%">
            <el-form :model="commentForm">
                <el-form-item>
                    <el-radio-group v-model="commentForm.commentRank" size="medium">
                        <el-radio-button :label="0">差评</el-radio-button>
                        <el-radio-button :label="1">好评</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-input type="textarea" v-model="commentForm.commentContent"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="insertComment">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import $ from "jquery"
    export default {
        name: "Order",
        data() {
            return {
                // 所有订单
                allOrders: [],
                // 进行中订单
                ongoingOrders: [],
                // 已完成订单
                completedOrders: [],
                // 已取消订单
                canceledOrders: [],
                // 出租订单
                rentalOrders: [],
                // 显示评论模态框
                dialogVisible: false,
                // 评论表单
                commentForm: {
                    "commentRank": 1
                },
                // 记录取消订单ID
                cancelOrderId: null
            }
        },
        mounted() {
            this.listOrders();
        },
        methods: {
            // 获取订单信息
            listOrders() {
                let that = this;
                $.ajax({
                    url: IP_ADDR + "order/listOrders",
                    headers: {
                        "Access-Token": sessionStorage.getItem("Access-Token").toString()
                    },
                    success(r) {
                        let resVal = r.res ;
                        that.allOrders = resVal.allOrders;
                        that.ongoingOrders = resVal.ongoingOrders;
                        that.completedOrders = resVal.completedOrders;
                        that.canceledOrders = resVal.canceledOrders;
                        that.rentalOrders = resVal.rentalOrders;
                    },
                    error(r) {
                        that.$message.error(r.responseJSON.message);
                    }
                });
            },
            // 打开评论模态框
            openCommentDialog(orderId) {
                this.commentForm.orderId = orderId;
                this.dialogVisible = true;
            },
            // 新增评论
            insertComment() {
                let that = this;
                $.ajax({
                    url: IP_ADDR + "comment/insertComment",
                    type: "POST",
                    headers: {
                        "Access-Token": sessionStorage.getItem("Access-Token").toString()
                    },
                    data: that.commentForm,
                    success() {
                        that.$message.success("评论成功");
                        // 刷新数据
                        that.listOrders();
                        // 关闭模态框
                        that.dialogVisible = false;
                    },
                    error(r) {
                        that.$message.error(r.responseJSON.message);
                    }
                });
            },
            // 发起投诉
            insertAccuse(orderId, accuseStatus) {
                this.$router.push("/accuse/" + orderId + "/" + accuseStatus);
            },
            // 结算订单
            payoff(orderId) {
                this.$router.push("/payoff" + orderId);
            },
            // 取消订单点击事件
            onCancelOrderClick(orderId) {
                this.cancelOrderId = orderId;
                let that = this;
                this.$confirm('入场时间半小时之前可无责取消,否则将收取费用, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 查询罚金
                    $.ajax({
                        url: IP_ADDR + "order/getOrderFine",
                        data: {
                            "orderId": orderId
                        },
                        success(r) {
                            // 判断是否须要收取罚金
                            if (r.res <= 0) {
                                that.$message.success("无责取消！");
                            }
                            // 跳转支付页面
                            that.$router.push("/pay" + r.res + orderId + "/" + 0);
                        },
                        error(r) {
                            console.log(r);
                        }
                    });
                });
            }
        }
    }
</script>

<style scoped>
    .el-input {
        width: 300px;
    }
    .tab{
        width: 30px;
    }
    .el-card {
        margin-bottom: 15px;
    }
</style>